<template>
  <!-- 已下订单记录信息 -->
  <div id="tableBox">
    <template v-for="item in recordList" :key="item.id">
      <div v-if="item.requisitionProductList.length != 0">
        <div class="top">
          <div class="info">
            <p>{{ item.purchaseCode }} -</p>
            <p>- {{ item.createTime }}</p>
          </div>
          <div class="line"></div>
          <el-button
            type="warning"
            :loading="isSaveing"
            @click="cancelOrder(item)"
            >取消下订单</el-button
          >
        </div>
        <el-table
          ref="table"
          row-key="id"
          :data="item.requisitionProductList"
          border
          :header-cell-style="{ background: '#f5f7fa' }"
        >
          <el-table-column label="物品名称" prop="productName">
          </el-table-column>
          <el-table-column label="规格型号" prop="specificationName">
          </el-table-column>
          <!-- <el-table-column label="单价(元)" prop="price"> </el-table-column> -->
          <el-table-column label="请购数量" prop="productBuyNum">
          </el-table-column>
          <el-table-column label="单位" prop="unitName"> </el-table-column>
          <el-table-column
            label="总价格(元)"
            prop="productBuyPrice"
          ></el-table-column>
          <el-table-column label="源订单号" prop="productBuyPrice">
          </el-table-column>
        </el-table>
      </div>
    </template>
  </div>
</template>
<script>
export default {
  emits: ['getPurchaseRequestById'],
  name: '',
  data () {
    return {
      isSaveing: false,
      recordList: []
    }
  },
  mounted () {
    this.getOrderRecord()
  },
  methods: {
    // 获取订单记录
    async getOrderRecord () {
      let param = {
        ids: this.$route.query.ids,
        generateState: 2// 生单状态 1未生单 2已生单
      }
      let { data } = await this.$API.purchase.getPurchaseRequestById.get(param)
      console.log(data)
      this.recordList = data
    },

    // 取消订单
    cancelOrder (item) {
      this.$confirm(`取消订单会删除采购单【${item.purchaseCode}】, 请问是否要继续取消?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let ids = item.requisitionProductList.map(item => item.id)
        this.isSaveing = true
        let res = await this.$API.purchase.cancelOrder.post({ ids: ids.join(',') })
        this.isSaveing = false
        if (res.code == 200) {
          this.$message.success("操作成功")
          this.$emit('getPurchaseRequestById')
          this.getOrderRecord()
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })

    }
  }
}
</script>
<style lang="scss" scoped>
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 15px 0;
  .info {
    display: flex;
    font-size: 14px;
    color: #333;
    p {
      white-space: nowrap;
    }
  }
  .line {
    height: 1px;
    width: 100%;
    margin: 0 10px;
    background: #eee;
  }
}
</style>